<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"  content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Filter features by attribute | Sample | ArcGIS API for JavaScript 4.18
    </title>
    <link rel="stylesheet"  href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.18/"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #seasons-filter {
            height: 160px;
            width: 100%;
            visibility: hidden;
        }

        .season-item {
            width: 40px;
            padding: 2px;
            text-align: center;
            vertical-align: baseline;
            cursor: pointer;
            height: 40px;
        }

        .season-item:focus {
            background-color: dimgrey;
        }

        .season-item:hover {
            background-color: dimgrey;
        }

        #titleDiv {
            padding: 10px;
        }

        #titleText {
            font-size: 20pt;
            font-weight: 60;
            padding-bottom: 10px;
        }
    </style>
    <script>
        require([
            "esri/views/MapView",
            "esri/Map",
            "esri/layers/FeatureLayer",
            "esri/widgets/Expand"
        ], function (MapView, Map, FeatureLayer, Expand) {


            const layer = new FeatureLayer({
                portalItem: {
                    id: "f9e348953b3848ec8b69964d5bceae02"
                },
                //来自服务的字段名称数组，包含在每个功能中
                outFields: ["SEASON"]
            });

            const map = new Map({
                basemap: "gray-vector",
                layers: [layer]
            });

            const view = new MapView({
                map: map,
                container: "viewDiv",
                center: [-98, 40],
                zoom: 4
            });

            const seasonsElement = document.getElementById("seasons-filter");

            //单击季节选择的事件处理程序
            seasonsElement.addEventListener("click", filterBySeason);

            let floodLayerView;

            //用户点击冬天、春天、夏天或秋天 在洪水警告图层视图上设置属性过滤器以显示该季节发布的警告
            function filterBySeason(event) {
                const selectedSeason = event.target.getAttribute("data-season");
                floodLayerView.filter = {
                    where: "Season = '" + selectedSeason + "'"
                };
            }

            view.whenLayerView(layer).then(function (layerView) {
                //FeatureLayerView 加载的山洪警告图层获取洪水警告图层视图的引用
                floodLayerView = layerView;

                //设置 UI 项
                seasonsElement.style.visibility = "visible";
                const seasonsExpand = new Expand({
                    view: view,
                    content: seasonsElement,
                    expandIconClass: "esri-icon-filter",
                    group: "top-left"
                });
                //当用户关闭扩展小部件时清除过滤器
                seasonsExpand.watch("expanded", function () {
                    if (!seasonsExpand.expanded) {
                        //属性、几何和时间范围过滤器
                        floodLayerView.filter = null;
                    }
                });
                view.ui.add(seasonsExpand, "top-left");
                view.ui.add("titleDiv", "top-right");
            });
        });
    </script>
</head>

<body>
<div id="seasons-filter" class="esri-widget">
    <div class="season-item visible-season" data-season="Winter">冬天</div>
    <div class="season-item visible-season" data-season="Spring">春天</div>
    <div class="season-item visible-season" data-season="Summer">夏天</div>
    <div class="season-item visible-season" data-season="Fall">秋季</div>
</div>
<div id="viewDiv"></div>
<div id="titleDiv" class="esri-widget">
    <div id="titleText">按季节划分的山洪</div>
    <div>山洪警报（2002 - 2012）</div>
</div>
</body>
</html>
